<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <c-select
          v-model="params['is_history.eq']"
          clearable
          placeholder="是否历史数据"
          :options="{
            0: '历史数据(否)',
            1: '历史数据(是)',
          }"
          @change="getAllData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="放款日期(含)"
          end-placeholder="放款日期(含)"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getAllData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          代偿笔数：
          <span class="text-danger">{{ tableCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          代偿金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          元
        </span>
      </div>
    </div>

    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      @row-click="selectRow"
      :data="tableData"
    ></c-table>

    <detail-dialog
      :visible.sync="viewVisible"
      :other-params="viewParams"
      :title="viewTitle"
    ></detail-dialog>
  </div>
</template>

<script>
import DetailDialog from '@/cadmin/views/count28/CompensDetail'
export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '担保机构名称', prop: 'service_name' } },
        { attrs: { label: '代偿笔数', prop: 'p' } },
        { attrs: { label: '代偿金额', prop: 'p1' } },
      ],
      params: {
        groupFields: ['service_id'],
        fields: ['service_name', 'service_id'],
        groupFunc: 'count(compens_view_28.customer_related_id),round(sum(amount))',
        create_time: '',
      },
      tableName: 'compens_view_28',
      serviceName: '',

      tableCount: 0,
      tableFunds: 0,
      countLoading: false,
      viewVisible: false,
      viewTitle: '',
      viewParams: {},
      queryDate: [],
    }
  },

  created() {
    this.getAllData()
  },
  methods: {
    getSelectDates(data) {
      if (!data || !data.length) {
        return ['', '']
      }
      let startTime = ''
      let endTime = ''
      const date = new Date(data[0])
      startTime = date
        ? `${date.getFullYear()}-${(date.getMonth() + 1 + '').padStart(2, 0)}-${date.getDate()}`
        : ''
      endTime = date
        ? `${new Date(data[1]).getFullYear()}-${(new Date(data[1]).getMonth() + 1 + '').padStart(
            2,
            0
          )}-${new Date(data[1]).getDate() + 1}`
        : ''
      return [startTime, endTime]
    },
    handleDateQuery() {
      const dates = this.getSelectDates(this.queryDate)

      this.params['load_date.gte'] = dates[0]
      this.params['load_date.lt'] = dates[1]
      this.getAllData()
    },
    selectRow(row) {
      this.viewVisible = true
      this.viewTitle = row.serviceName || '' + '项目详情'
      this.viewParams = {
        ...this.params,
        fields: '',
        groupFields: '',
        groupFunc: '',
        'service_id.eq': row.service_id || '',
      }
    },
    getCountData() {
      this.countLoading = true
      this.$api
        .getData('credit', this.tableName, { ...this.params, groupFields: '' })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableCount = data.p || 0
          this.tableFunds = data.p1 || 0
        })
        .finally(() => {
          this.countLoading = false
        })
    },

    getAllData() {
      this.getData()
      this.getCountData()
    },
    getData() {
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, { service_name: 'desc' })
        .then(res => {
          this.tableData = res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
